<template>
	<div class="modifyExpress">
    <div class="modify-info">
      <div class="modify-info-wrap-item">
        <van-checkbox v-model="isReceived" label-position="left" checked-color="#ee0a24"  icon-size="24px">
          <div class="">已收到货</div>
        </van-checkbox>
      </div>
      <div v-show="isReceived">
        <div class="modify-info-tit">
          <span>请填写物流信息</span>
        </div>
        <div class="modify-info-wrap">
          <div class="modify-info-wrap-item" @click="showSheet = true">
            <span class="label">物流公司</span>
            <span class="txt choose fr">{{ chooseTxt }}</span>
          </div>
          <div class="modify-info-wrap-item">
            <span class="label">快递单号</span>
            <span class="fr"><input type="text" v-model="formData.express_no" placeholder="请输入快递单号"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="modify-btn">
      <van-button round class="btn red-gra-btn" @click="handleClickSubmit">确认提交</van-button>
    </div>
    <van-action-sheet style="height:60vh;" v-model="showSheet" :actions="expressList" @select="onSelect" />
  </div>
</template>

<script>
  import Vue from 'vue'
  import { ActionSheet, Checkbox } from 'vant'
  Vue.use(ActionSheet).use(Checkbox)
  import { getExpressList, editConplainIrderExpress } from '@/api/order/order'
  export default Vue.extend({
    name: 'index',
    mounted() {
      this.getComplainOrderAddressFn()
      this.getRouteData()
    },
    data() {
      return {
        chooseTxt: '请选择',
        isReceived: true, // 默认收到货
        formData: {
          is_receiving: '0', // 1表示未收到货
          express: '',
          express_no: '',
          express_name: ''
        },
        showSheet: false,
        expressList: []
      }
    },
    methods: {
      getRouteData() {
        const routeData = this.$route.query
        if (routeData.express_name) this.chooseTxt = routeData.express_name
        this.formData.express = routeData.express
        this.formData.express_no = routeData.express_no
        this.formData.express_name = routeData.express_name
      },
      // 提交按钮
      handleClickSubmit() {
        this.formData.is_receiving = this.isReceived ? '0' : '1'
        const param = Object.assign({}, this.formData, true)
        param.id = this.$route.query.complain_order_id
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        editConplainIrderExpress(param).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error('操作成功')
            setTimeout(() => {
                // TODO 小程序返回
                wx.navigateBack({
                  delta: 1
                })
                window.$$publish('refreshRefundDetail', true)
            }, 1000)
          } else {
            this.$Error(res.msg)
          }
        })
      },
      onSelect(item) {
        // 默认情况下点击选项时不会自动收起
        // 可以通过 close-on-click-action 属性开启自动收起
        this.showSheet = false
        this.chooseTxt = item.name
        this.formData.express = item.value
        this.formData.express_name = item.name
      },
      getComplainOrderAddressFn() {
        const param = {}
        param.id = this.$route.query.complain_order_id
        getExpressList(param).then(res => {
          if (res.status == 1) {
            const expressList = []
            const resData = res.data
            for (var i in resData) {
              const obj = {}
              obj.name = resData[i]
              obj.value = i
              expressList.push(obj)
            }
            this.expressList = expressList
          } else {
            this.$Error(res.msg)
          }
        })
      }
    }
  })
</script>

<style lang="scss">
  .miniprogram-root{
    .modifyExpress{
      .van-action-sheet__item {
        line-height: 44px;
      }
      .van-action-sheet__cancel,.van-action-sheet__item {
        padding: 28px 32px;
        font-size: 32px;
        text-align: center;
      }
      .modify-info-wrap-item{
        .van-checkbox__label{
          margin-left:0;
          flex: 1;
        }
      }
    }
  }
  .modifyExpress{
    .modify-info{
      background: #fff;
      border-radius: 20px;
      margin-top: 20px;
      &-tit{
        height: 88px;
        line-height: 88px;
        border-bottom: 1px solid #EDEDED;
        color: #333;
        font-size: 28px;
        padding-left: 30px;
      }
      &-wrap{
        &-item{
          padding: 34px 30px;
          line-height: 36px;
          color: #333;
          font-size: 26px;
          input{
            text-align: right;
          }
          .txt{
            color: #999;
            &.choose{
              position: relative;
              padding-right: 20px;
              &::after{
                content: '';
                width: 11px;
                height: 18px;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                background: url('https://img.wifenxiao.com/h5-wfx/images/user/member/right.png') center/cover no-repeat;
              }
            }
          }
        }
      }
    }
    .modify-btn{
      padding: 40px 30px;
      .btn{
        width: 100%;
        font-size: 28px;
        height: 88px;
        line-height: 88px;
        color: #fff;
      }
    }
  }
</style>
